import { connect } from 'umi';
import { IRoleManageProp } from './type';
import './styles.less';
import {
  roleManageTable,
  RouleManageContext,
  useRoleManageReducer,
} from './hooks';
import { Col, Row } from 'antd';
import cls from 'classnames';
import { RoleManageTable, RoleManageTitle } from './components';

const RouleManageController: React.FC<IRoleManageProp> = ({ permissions }) => {
  const prefixCls = 'roleMange-'; //根部样式类名
  // 获取管理页面数据
  const { reloadRoleTable, tableDataSource, tableLoading } = roleManageTable();
  const {
    searchTableValue,
    expandedRowKeys,
    rouleDispatch,
    checkedRowKeys,
    detailMenuLeftValue,
    roleDetailRightValue,
  } = useRoleManageReducer();

  const roleReload = () => {
    const promise = new Promise((resolve, reject) => {
      rouleDispatch({
        type: 'role-remove-allState', // 清空state
      });

      resolve(true);
    });

    promise.then((res) => {
      if (res) {
        reloadRoleTable();
      }
    });
  };

  // 是否打开详情页面

  return (
    <>
      <RouleManageContext.Provider
        value={{
          curRes: permissions, //权限数据
          prefixCls, // 根部样式类名
          tableData: tableDataSource, //表格请求的数据
          tableLoading: tableLoading, //表格请求的loading
          searchTableValue, //输入框输入的值,存context 便于头部和表格共享数据
          expandedRowKeys, //表格展开的 key
          rouleDispatch, //派发方法
          checkedRowKeys, //表格选中的 key
          reloadRoleTableState: reloadRoleTable, //不清空状态刷新
          detailMenuLeftValue, //详情左侧权限菜单搜索值
          roleDetailRightValue, //详情右侧搜索值
          // roleCurrentIndex,
          // roleCurrentKey,
        }}
      >
        <Row
          className={cls(prefixCls + 'row')}
          // gutter={[8, 8]}
          style={{ position: 'relative', overflow: 'hidden' }}
        >
          <Col span={24} className={cls(prefixCls + 'divBox')}>
            <RoleManageTitle reloadRoleTable={roleReload} />
            <RoleManageTable reloadRoleTable={roleReload} />
          </Col>
        </Row>
      </RouleManageContext.Provider>
    </>
  );
};

export default connect(({ baseLogin, navTab }: Record<string, any>) => ({
  permissions: baseLogin?.permissions,
  navTab,
}))(RouleManageController);
